<template>
    <div class="table-page">
        <GiTable
            row-key="id"
            title="存储管理"
            :data="dataList"
            :columns="columns"
            :loading="loading"
            :scroll="{ x: '100%', y: '100%', minWidth: 1300 }"
            :pagination="pagination"
            :disabled-tools="['size']"
            :disabled-column-keys="['name']"
            @refresh="search"
        >
            <template #toolbar-left>
                <a-input v-model="queryForm.description" placeholder="请输入名称/编码/描述" allow-clear
                         @change="search">
                    <template #prefix>
                        <icon-search/>
                    </template>
                </a-input>
                <a-select
                    v-model="queryForm.status"
                    :options="DisEnableStatusList"
                    placeholder="请选择状态"
                    allow-clear
                    style="width: 150px"
                    @change="search"
                />
                <a-button @click="reset">
                    <template #icon>
                        <icon-refresh/>
                    </template>
                    <template #default>重置</template>
                </a-button>
            </template>
            <template #toolbar-right>
                <a-button v-permission="['system:storage:add']" type="primary" @click="onAdd">
                    <template #icon>
                        <icon-plus/>
                    </template>
                    <template #default>新增</template>
                </a-button>
            </template>
            <template #name="{ record }">
                <a-space fill>
                    <span>{{ record.name }}</span>
                    <a-tag v-if="record.isDefault" color="arcoblue" size="small" class="gi_round">
                        <template #default>默认</template>
                    </a-tag>
                </a-space>
            </template>
            <template #type="{ record }">
                <a-tag v-if="record.type === 1" color="arcoblue">阿里云OSS</a-tag>
                <a-tag v-else-if="record.type === 2" color="green">本地存储</a-tag>
            </template>
            <template #status="{ record }">
                <span v-if="record.status === 1">
                    <icon-check-circle-fill class="success"/>
                    <span>启用</span>
                  </span>
                        <span v-if="record.status === 2">
                    <icon-minus-circle-fill class="warning"/>
                    <span>禁用</span>
                  </span>
            </template>
            <template #action="{ record }">
                <a-space>
                    <a-link v-permission="['system:storage:update']" @click="onUpdate(record)">修改</a-link>
                    <a-link
                        v-permission="['system:storage:delete']"
                        status="danger"
                        :title="record.isDefault ? '默认存储不能删除' : undefined"
                        :disabled="record.disabled"
                        @click="onDelete(record)"
                    >
                        删除
                    </a-link>
                </a-space>
            </template>
        </GiTable>

        <StorageAddDrawer ref="StorageAddDrawerRef" @save-success="search"/>
    </div>
</template>

<script setup lang="ts">
import StorageAddDrawer from './StorageAddDrawer.vue'
import {type StorageQuery, type StorageResp, deleteStorage, listStorage} from '@/apis/system'
import type {TableInstanceColumns} from '@/components/GiTable/type'
import {useTable} from '@/hooks'
import {useDict} from '@/hooks/app'
import {isMobile} from '@/utils'
import has from '@/utils/has'
import {DisEnableStatusList} from '@/constant/common'

defineOptions({name: 'SystemStorage'})

const queryForm = reactive<StorageQuery>({})

const {
    tableData: dataList,
    loading,
    pagination,
    search,
    handleDelete
} = useTable((page) => listStorage({...queryForm, ...page}), {immediate: true})

const columns: TableInstanceColumns[] = [
    {
        title: '序号',
        width: 66,
        align: 'center',
        render: ({rowIndex}) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize)
    },
    {title: '名称', dataIndex: 'name', slotName: 'name', width: 140, ellipsis: true, tooltip: true},
    {title: '编码', dataIndex: 'code', ellipsis: true, tooltip: true},
    {title: '状态', slotName: 'status', align: 'center'},
    {title: '类型', slotName: 'type', align: 'center'},
    {title: '访问密钥', dataIndex: 'accessKey', ellipsis: true, tooltip: true},
    {title: '终端节点', dataIndex: 'endpoint', ellipsis: true, tooltip: true},
    {title: '桶名称', dataIndex: 'bucketName', ellipsis: true, tooltip: true},
    {title: '域名', dataIndex: 'domain', ellipsis: true, tooltip: true},
    {title: '描述', dataIndex: 'description', ellipsis: true, tooltip: true},
    {title: '创建人', dataIndex: 'createUserString', ellipsis: true, tooltip: true, show: false},
    {title: '创建时间', dataIndex: 'createTime', width: 180},
    {title: '修改人', dataIndex: 'updateUserString', ellipsis: true, tooltip: true, show: false},
    {title: '修改时间', dataIndex: 'updateTime', width: 180, show: false},
    {
        title: '操作',
        slotName: 'action',
        width: 130,
        align: 'center',
        fixed: !isMobile() ? 'right' : undefined,
        show: has.hasPermOr(['system:storage:update', 'system:storage:delete'])
    }
]

// 重置
const reset = () => {
    queryForm.description = undefined
    queryForm.status = undefined
    search()
}

// 删除
const onDelete = (record: StorageResp) => {
    return handleDelete(() => deleteStorage(record.id), {
        content: `是否确定删除存储 [${record.name}]？`,
        showModal: true
    })
}

const StorageAddDrawerRef = ref<InstanceType<typeof StorageAddDrawer>>()
// 新增
const onAdd = () => {
    StorageAddDrawerRef.value?.onAdd()
}

// 修改
const onUpdate = (record: StorageResp) => {
    StorageAddDrawerRef.value?.onUpdate(record.id)
}
</script>

<style lang="scss" scoped></style>
